<template>
  <div class="menu">
    <el-row>
      <!-- 菜单折叠 -->
      <el-col :span="7" :xs="2" :sm="2" :lg="7">
        <el-menu mode="horizontal" :router="false" text-color="#5a5e66">
          <el-menu-item @click="menuFold()" v-show="config.isVertical">
            <i v-show="!config.isCollapse" class="el-icon-s-fold"></i>
            <i v-show="config.isCollapse" class="el-icon-s-unfold"></i>
          </el-menu-item>

          <!-- 面包屑 -->
          <el-menu-item style="padding: 0 15px;" v-show="config.isXs">
            <breadcrumb></breadcrumb>
          </el-menu-item>
        </el-menu>
      </el-col>
      <!-- 菜单区 -->
      <transition name="el-zoom-in-center">
        <el-col :span="10" v-show="!config.isVertical">
          <el-menu
            :default-active="active"
            mode="horizontal"
            :router="true"
            text-color="#5a5e66"
            style="margin: 0 auto; width: max-content;"
          >
            <!-- 导航菜单树组件，动态加载菜单 -->
            <!-- 横排小于8个 -->
            <label v-for="(item,index) in menuTree" :key="item.id">
              <menutree v-if="index<menuNum" :menu="item"></menutree>
            </label>
            <!-- 横排大于8个 -->
            <el-submenu v-if="menuTree.length >= menuNum" index="9-999">
              <template slot="title">
                <i :class="['el-icon-more','asideIcon']"></i>
                <span slot="title">更多菜单</span>
              </template>
              <label v-for="(item,index) in menuTree" :key="item.id">
                <menutree v-if="index>=menuNum" :menu="item"></menutree>
              </label>
            </el-submenu>
          </el-menu>
        </el-col>
      </transition>
      <!-- 功能按钮区 -->
      <el-col
        :span="7"
        :xs="22"
        :sm="22"
        :lg="7"
        style="min-width: 230px;"
        class="_right_menu"
        active-text-color="#ffffff"
        text-color="#ffffff"
      >
        <el-menu mode="horizontal" default-active="-1">
          <!-- 设置及个人中心 -->
          <el-menu-item class="_right_menu" style="padding: 0;" index="tool-0">
            <el-dropdown trigger="click">
              <span class="el-dropdown-link">
                <div style="padding: 0 12;">
                  <i class="el-icon-user-solid"></i>
                  <span>{{ currentUser.name }}</span>
                  <i
                    class="el-icon-arrow-down el-icon--right"
                    style="font-size: 12px;margin: 5px 0px 0px 0px;"
                  ></i>
                </div>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>个人中心</el-dropdown-item>
                <el-dropdown-item @click.native="logout()">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-menu-item>

          <!-- 全屏 -->
          <el-menu-item
            index="tool-1"
            class="_right_menu"
            @click="$refs.fullscreen.toggle()"
            title="全屏 / 退出全屏"
          >
            <Fullscreen ref="fullscreen"></Fullscreen>
          </el-menu-item>
          <!-- 消息通知 -->
          <el-menu-item
            class="_right_menu"
            title="消息通知"
            index="tool-2"
            @click="$refs.inform.drawer = !$refs.inform.drawer"
          >
            <el-badge :value="config.informNum" class="item" :hidden="config.informNum==0">
              <span class="el-icon-bell"></span>
            </el-badge>
          </el-menu-item>
          <!-- 主题 -->
          <el-menu-item
            index="tool-3"
            class="_right_menu"
            :title="$store.state.theme=='dark'?'光明':'黑暗'"
            @click="setTheme($store.state.theme=='dark'?'light':'dark')"
          >
            <span v-if="$store.state.theme=='dark'" class="el-icon-sunrise-1"></span>
            <span v-if="$store.state.theme=='light'" class="el-icon-moon-night"></span>
          </el-menu-item>
          <!-- 菜单切换 -->
          <el-menu-item
            index="tool-4"
            class="_right_menu"
            title="菜单切换"
            @click="menuVertical()"
            v-show="config.isXs"
          >
            <span class="el-icon-menu"></span>
          </el-menu-item>
        </el-menu>
      </el-col>
    </el-row>

    <!-- 主题 -->
    <!-- <Settings ref="settings" @on_theme_changed="$emit('on_theme_changed')"></Settings> -->
    <inform ref="inform"></inform>
  </div>
</template>
<script>
// import Fullscreen from './root-main-menu-fullscreen.vue';
// import Settings from './settings.vue';
const Fullscreen = () => import("./root-main-menu-fullscreen.vue");
// const Settings = () => import("./settings.vue");
import menutree from "./menutree.vue";
import breadcrumb from "./breadcrumb.vue";
import inform from "./inform.vue";
export default {
  components: { Fullscreen, menutree, breadcrumb, inform },
  data: function() {
    return {
      active: "/home",
      menuNum: 4,
      menuTree: []
    };
  },
  watch: {
    $route: function(to, from) {
      if (to && to.fullPath) {
        this.active = to.fullPath;
      }
    }
  },
  created: function() {
    this.open('home');
    this.menuTree = require("../assets/json/menu.json");
    if (this.getCookie("COOKIE_THEME")) {
      this.$store.state.theme = this.getCookie("COOKIE_THEME");
    }
    document.getElementsByTagName("body")[0].className =
      "theme-" + this.$store.state.theme;
  },

  computed: {
    config: function() {
      return this.$store.state.config;
    },
    currentUser: function() {
      return this.$store.state.currentUser;
    }
  },
  methods: {
    open: function(path) {
      this.$router.push(path);
    },
    logout: function() {
      // this.$axios.post("currentUser/logout", null).then(res => {
      //   this.open('login');
      // });
      this.open('login');
    },
    menuFold() {
      this.$store.state.config.isCollapse = !this.config.isCollapse;
    },
    menuVertical() {
      this.$store.state.config.isVertical = !this.config.isVertical;
    },
    setTheme: function(val) {
      this.setCookie("COOKIE_THEME", val);
      this.$store.state.theme = this.getCookie("COOKIE_THEME");
      this.theme = val;
      document.getElementsByTagName("body")[0].className = "theme-" + val;
    },
    getCookie: function(name) {
      try {
        return document.cookie.match(
          new RegExp("(^| )" + name + "=([^;]*)(;|$)")
        )[2];
      } catch (e) {
        return "";
      }
    },
    setCookie: function(name, value) {
      if (value == null) {
        value = "";
      }

      var expiredays = 365;
      var exdate = new Date();
      exdate.setDate(exdate.getDate() + expiredays);

      var cookie =
        name +
        "=" +
        escape(value) +
        "; path=/; expires=" +
        exdate.toGMTString();
      document.cookie = cookie;
    }
  }
};
</script>
<style scoped>
._right_menu {
  float: right;
  padding: 0 12px;
}
._left_menu {
  float: left;
  height: 50px;
  line-height: 50px;
}
.menu .el-menu-item [class^="el-icon-"] {
  margin-right: 0px;
}
.asideFold .el-menu-item:focus,
.el-menu-item:hover {
  background-color: transparent;
}
._left_menu .el-menu-item:active {
  background-color: transparent;
}

.el-menu-item >>> i,
.el-submenu__title i {
  color: inherit;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>
<style>
/* 顶部菜单栏样式————开始 */
.menu .el-tabs__item {
  height: 30px;
  line-height: 30px;
}
.menu .el-submenu__title {
  height: 50px !important;
  line-height: 50px !important;
}
.menu .el-menu-item {
  height: 50px;
  line-height: 50px;
}
.menu .el-menu--horizontal > label {
  float: left;
  margin: 0;
}
.el-submenu__icon-arrow {
  margin-top: -5px;
}
.menu .el-menu--horizontal > label > .el-submenu .el-submenu__icon-arrow {
  position: static;
  vertical-align: middle;
  margin-left: 8px;
  margin-top: -3px;
}
.menu {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.menu .el-submenu__icon-arrow {
  right: 5px;
}
/* .menu .el-menu-item:focus,
.menu .el-menu-item:hover {
  color: #409eff;
}
.menu .el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
.menu .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
  color: #409eff !important;
} */

.menu .el-menu.el-menu--horizontal {
  border-bottom: 0px;
}
/* 顶部菜单栏样式————结束 */
</style>